﻿@model HomeVM
<div id="VillasList">

    <div class="row px-lg-5 m-lg-4 m-sm-0 px-sm-0" style="--bs-gutter-x:0">

        @foreach (var villa in Model.VillaList)
        {
            <div class="p-4 col-md-12 col-lg-6">
                <div class="row" style="border-radius:5px; border: 1px solid #aaa">
                    <div class="col-4 p-2">
                        <img class="d-block w-100" style="border-radius:5px;" src="@villa.ImageUrl">
                    </div>
                    <div class="col-8">
                        <div class="d-flex justify-content-between">
                            <p class="card-title text-warning" style="font-size:xx-large">@villa.Name</p>
                            <div class="pt-2">
                                <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target='#exampleModal-@(villa.Id)'>
                                    Details
                                </button>
                            </div>
                        </div>
                        <p class="card-text">
                            @Html.Raw(villa.Description)
                        </p>
                    </div>
                    <div class="col-12">
                        <div class="row pb-3 pt-2">
                            <div class="col-4">
                                <a asp-controller="Booking" asp-action="FinalizeBooking" asp-route-villaId="@villa.Id" asp-route-checkInDate="@Model.CheckInDate" asp-route-nights="@Model.Nights" class="btn btn-success form-control btn-block">
                                    Book
                                </a>
                                @* @if (Model.CheckInDate > DateOnly.FromDateTime(DateTime.Now))
                            {
                            @if (villa.IsAvailable)
                            {
                            <a asp-controller="Booking" asp-action="FinalizeBooking" asp-route-villaId="@villa.Id" asp-route-checkInDate="@Model.CheckInDate" asp-route-nights="@Model.Nights" class="btn btn-success form-control btn-block">
                            Book
                            </a>
                            }
                            else
                            {
                            <a class="btn btn-outline-danger disabled form-control btn-block">
                            Sold Out
                            </a>
                            }
                            } *@
                            </div>
                            <div class="col-4">
                                <span class="">Max Occupancy : @villa.Occupancy adults </span><br />
                                <span class=" pt-1">Villa Size : @villa.Sqft sqft</span><br />
                            </div>
                            <div class="col-4">
                                <span class="text-warning float-end font-weight-bold pt-1" style="font-size:25px;">
                                    USD
                                    <span style="border-bottom:1px solid #ff6a00">
                                        @villa.Price.ToString("c")
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @* 弹出框 *@
            <div class="modal fade" id="exampleModal-@(villa.Id)" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl" style="border: 1px solid #aaa; border-radius:7px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-3 text-success" id="exampleModalLabel">Villa Details</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body m-0">
                            <partial name="_VillaDetail" model="@villa" />

                        </div>
                        <div class="modal-footer">
                            <button asp-controller="Home" asp-action="GeneratePPTExport" asp-route-id="@villa.Id" type="submit" class="btn btn-outline-warning">
                                <i class="bi bi-file-earmark-ppt"></i> Download Villa PPT
                            </button>
                            <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                        </div>

                    </div>
                </div>
            </div>
        }

    </div>

</div>